
<!-- <page-header [action]="phActionTpl">
  <ng-template #phActionTpl>
    <button (click)="confirm()" nz-button nzType="primary">确定</button>
    <button (click)="init()" nz-button >初始化</button>
  </ng-template>
</page-header> -->
<!-- 
<div nz-col nzSpan="4">
  <nz-card >
    <div *ngFor="let node of nodes">
      <a [title]="node.name" [draggable]="node.data" (dragstart)="onDrag($event,node)">
        <i class="iconfont  icon-rectangle"></i>
      </a>
    </div>

    <div class="wrap">
       <div class="list" *ngFor="let node of nodes">
      <span class="ant-typography" [draggable]="true" 
      [title]="node.name"
       [draggable]="node.data" 
       (dragstart)="onDrag($event,node)">
      {{node.id}}</span>
    </div>
    </div>
   
  </nz-card>
</div> -->
<div style="display: flex; flex-direction: row-reverse;">
  <button (click)="save()" nz-button nzType="primary" >保存</button>
</div>

  <div nz-col nzSpan="20">
  <nz-card>
    <div class="full"> 
        <div class="canvas" #one></div>
    </div>
  
  </nz-card>
</div>

<div nz-col nzSpan="4">

  <nz-card>
    <div class="props">
      <div class="pv5">
        <div *ngIf="!selected">
          <div class="tools">
            <div class="title">{{ mainItem.name }}</div>
            <div class="buttons">
              <a  [title]="mainItem.name" [draggable]="mainItem.data"
                (dragstart)="onDrag($event, mainItem)" >
                <i class="iconfont {{ mainItem.icon }}"></i>
              </a>
            </div>
            <div *ngFor="let item of tools">
              <div class="title">{{ item.group }}</div>
              <div class="buttons">
                <a *ngFor="let button of item.children" [title]="button.name" [draggable]="button.data"
                  (dragstart)="onDrag($event, button)" >
                  <i class="iconfont {{ button.icon }}"></i>
                </a>
              </div>
            </div>
          </div>
      
          <div class="abs" style="bottom:.2rem">
            <div class="title mt30">
              小提示
            </div>
            <ul class="ml30 mb20 mt10">
              <li>方向键：控制节点移动5个像素</li>
              <li>Ctrl + 方向键：控制节点移动1个像素</li>
              <li>Ctrl + 鼠标移动：移动整个画布</li>
              <li>Ctrl + 鼠标滚轮：缩放</li>
             
            </ul>
          </div>
        </div>
        <div *ngIf="selected">
          <app-props [props]="selected" [readonly]="readonly" (ok)="onChangeProps($event)"
            (animateChange)="onAnimateChange()"></app-props>
        </div>
      </div>
    </div>
  
  </nz-card>
</div>



